<template>
  <div>
    <BasicModal
      @register="register"
      :title="title"
      width="800px"
      :destroyOnClose="true"
      :canFullscreen="false"
      :showOkBtn="false"
      :showCancelBtn="false"
    >
      <BasicForm @register="registerForm">
        <template #screenshotPathsList="{ model, field }">
          <ClipUploadImg v-model="model[field]" :maxNumber="9" :cropper="false" />
        </template>
        <template #attachmentPathsList="{ model, field }">
          <UploadFile v-model:model-value="model[field]" :max-count="5"></UploadFile>
        </template>
      </BasicForm>
    </BasicModal>
  </div>
</template>

<script lang="ts" setup>
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { BasicForm, useForm } from '@/components/Form';
  import { ref } from 'vue';
  import { useMessage } from '@/hooks/web/useMessage';

  import { IFollowRecordFrom } from '@/api/institution/model/businessOpportunitiesManageModel';
  import { ClipUploadImg } from '@/components/Upload/index';

  import UploadFile from '@/components/UploadFile/index.vue';
  import { followAddOrUpdate } from '@/api/institution/businessOpportunitiesManage';
  import { cloneDeep } from 'lodash-es';
  const title = ref('添加跟进记录');
  const type = ref('add');
  const { createMessage } = useMessage();

  const emit = defineEmits(['reload']);

  const typeMap = {
    add: '添加跟进记录',
    edit: '编辑跟进记录',
  };

  const [registerForm, { validate, setProps, setFieldsValue, updateSchema }] = useForm({
    schemas: [
      {
        field: 'id',
        component: 'Input',
        label: '跟进记录id',
        show: false,
      },
      {
        field: 'boInfoId',
        component: 'Input',
        label: '供需id',
        show: false,
      },
      {
        field: 'followTime',
        component: 'DatePicker',
        required: true,
        label: '跟进时间',
        componentProps: {
          placeholder: '请选择跟进时间',
          valueFormat: 'YYYY-MM-DD',
          showTime: false,
        },
      },
      {
        field: 'followMethod',
        component: 'Select',
        required: true,
        label: '跟进方式',
        componentProps: {
          options: [
            {
              label: '电话沟通',
              value: '电话沟通',
            },
            {
              label: '微信沟通',
              value: '微信沟通',
            },
            {
              label: '邮件沟通',
              value: '邮件沟通',
            },
            {
              label: '线下面聊',
              value: '线下面聊',
            },
          ],
        },
      },
      {
        field: 'followSummary',
        component: 'InputTextArea',
        label: '跟进内容摘要',
        componentProps: {
          rows: 4,
          placeholder:
            '简要描述此次跟进沟通的主要内容，重点突出关键信息，如对方需求变化、项目进展、合作意向等(最多200个字)',
          maxlength: 200,
          showWordLimit: true,
        },
      },
      {
        field: 'attachmentPathsList',
        component: 'Upload',
        label: '跟进文件附件',
        slot: 'attachmentPathsList',
      },
      {
        field: 'screenshotPathsList',
        component: 'Upload',
        label: '沟通记录截图',
        slot: 'screenshotPathsList',
      },
    ],
    autoFocusFirstItem: true,
    actionColOptions: {
      span: 24,
    },
    labelWidth: 120,
    baseColProps: { span: 20 },
    submitButtonOptions: {
      text: '确认',
    },
    resetButtonOptions: {
      text: '取消',
    },
    submitFunc: async () => {
      const data: IFollowRecordFrom = await validate();
      setProps({
        submitButtonOptions: {
          loading: true,
        },
      });
      try {
        await followAddOrUpdate({ ...data, followTime: data.followTime + ' 00:00:00' });
        setProps({
          submitButtonOptions: {
            loading: false,
          },
        });

        createMessage.success(`${typeMap[type.value]}成功`);
        emit('reload');
        closeModal();
      } catch (error) {
        console.log('error--->', error);
        setProps({
          submitButtonOptions: {
            loading: false,
          },
        });
      }
    },
    resetFunc: async () => {
      closeModal();
    },
  });

  const [register, { closeModal }] = useModalInner(async (data) => {
    // console.log('data--->', data);
    type.value = data.type;

    data.row && setFieldsValue(cloneDeep(data.row));
    updateSchema({
      field: 'printerNo',
      componentProps: {
        disabled: type.value === 'edit',
      },
    });

    title.value = typeMap[data.type];
  });
</script>

<style lang="less" scoped></style>
